<template>
  <div id="roomList">
    <a-form :model="pagination" layout="inline">
      <a-form-item field="roomName" label="名称" style="min-width: 280px">
        <a-input v-model="pagination.roomName" placeholder="请输入名称"/>
      </a-form-item>
      <a-form-item field="tags" label="标签" style="min-width: 280px">
        <a-input-tag v-model="pagination.tags" placeholder="请输入标签"/>
      </a-form-item>
      <a-form-item>
        <a-space wrap>
          <a-button type="primary" @click="handleSearch">搜索</a-button>
          <a-button type="primary" status="warning" @click="handleReset"
          >重置
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <a-table
        :data="data"
        :pagination="{
            total: pagination.total,
            pageNum: pagination.pageNum,
            pageSize: pagination.pageSize,
          }"
        @page-change="changePage"
        column-resizable
        :columns="columns"
        style="margin-bottom: 20px"
    >
      <template #tags="{ record }">
        <a-space wrap>
          <a-tag v-for="tag in record.tags" :key="tag" color="green"
          >{{ tag }}
          </a-tag>
        </a-space>
      </template>
      <template #type="{ record }">
        <a-tag v-if="record.type == RoomTypeEnum.PUBLIC.code" :color="RoomTypeEnum.PUBLIC.color">
          {{ RoomTypeEnum.PUBLIC.text }}
        </a-tag>
        <a-tag v-else-if="record.type == RoomTypeEnum.SECRET.code" :color="RoomTypeEnum.SECRET.color">
          {{ RoomTypeEnum.SECRET.text }}
        </a-tag>
        <a-tag v-else-if="record.type == RoomTypeEnum.PRIVATE.code" :color="RoomTypeEnum.PRIVATE.color">
          {{ RoomTypeEnum.PRIVATE.text }}
        </a-tag>
      </template>
      <template #avatar="{ record }">
        <a-avatar shape="square">
          <img alt="avatar" :src="record.avatar"/>
        </a-avatar>
      </template>
      <template #count="{ record }">
        {{ record.count ?? 0 + '/' + record.maxMembers }}
      </template>
      <template #createTime="{ record }">
        {{ moment(record.createTime).format("YYYY-MM-DD") }}
      </template>
      <template #optional="{ record }">
        <a-link status="normal" @click.prevent="joinRoom(record)">加入</a-link>
      </template>
    </a-table>

    <a-modal v-model:visible="inputPasswordFormShow" @ok="handleOk" @cancel="handleCancel" simple>
      <div style="margin-bottom: 10px; font-weight: bold">
        该房间是【加密】房间，需要输入密码：
      </div>
      <a-input
          v-model="roomPassword"
          placeholder=请输入房间密码
          type="password"
      />

    </a-modal>
  </div>
</template>


<script lang="ts" setup>
import {onMounted, ref} from "vue";
import moment from "moment";
import {RoomTypeEnum} from "/src/common/enums/room"
import {Message} from "@arco-design/web-vue";
import {RoomControllerService} from "../../apis";
import {useStore} from "vuex";
import {useRouter} from "vue-router";

const router = useRouter();
const inputPasswordFormShow = ref(false);
const roomPassword = ref("");
const columns = [
  {
    title: "房号",
    dataIndex: "id",
  },
  {
    title: "头像",
    slotName: "avatar",
  },
  {
    title: "名称",
    dataIndex: "name",
  },
  {
    title: "描述",
    dataIndex: "description",
    width: 350
  },
  {
    title: "类型",
    slotName: "type",
  },
  {
    title: "标签",
    slotName: "tags",
  },
  {
    title: "人数",
    slotName: "count",
  },
  {
    title: "房主",
    dataIndex: "owner",
  },
  {
    title: "创建时间",
    slotName: "createTime",
  },
  {
    title: "操作",
    slotName: "optional",
  },
];
const data = ref([]);
const pagination = ref({
  roomName: "",
  tags: [],
  total: 5,
  pageSize: 5,
  pageNum: 1,
});
const store = useStore();
const loginUser = store.dispatch("user/getLoginUser")
let tempRoom = {};

const joinRoom = async (room) => {
  if (room.type == RoomTypeEnum.SECRET.code) {
    inputPasswordFormShow.value = true;
    tempRoom = room;
  } else if (room.type == RoomTypeEnum.PRIVATE.code) {
    Message.error("该房间是私人房间，不可加入")
  } else {
    doJoin(room);
  }
};
const handleOk = () => {
  doJoin(tempRoom)
  roomPassword.value = "";
}
const doJoin = async (room) => {
  let dto = {
    roomId: room.id,
    userId: loginUser.userId,
  }
  if (room.type == RoomTypeEnum.SECRET.code) {
    if (roomPassword.value)
      dto.password = roomPassword.value;
  }
  const res = await RoomControllerService.join({...dto});
  if (res.code === 200) {
    Message.success("加入成功");
    router.push({
      name: "QuestionRoom"
    })
  } else {
    Message.error(res.msg)
  }
}
const handleCancel = () => {
  roomPassword.value = "";
  inputPasswordFormShow.value = false;
}
const changePage = (pageNum) => {
  pagination.value.pageNum = pageNum;
  getData();
};
const handleSearch = () => {
  pagination.value.pageNum = 1;
  getData();
};
const handleReset = () => {
  pagination.value.pageNum = 1;
  pagination.value.tags = [];
  pagination.value.roomName = "";
  getData();
};

const getData = async () => {
  console.log("getData")
  const res = await RoomControllerService.list({...pagination.value});
  if (res.code === 200) {
    data.value = res.data.records;
    data.value.forEach(x => {
      x.owner = x.createUser.nickName;
      x.tags = JSON.parse(x.tags)
    });
    pagination.value.total = res.data.total;
  } else {
    Message.error(res.msg);
  }
};

onMounted(() => {
  getData();
});
</script>


<style scoped>

</style>
